<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="50%">
            <!-- 具名插槽 -->
                <span slot="title" class="dialog-title">{{ tittle }}</span>
                <div class="dialog_body">
                    <MyCascader ref="cascader" @sendData="handlerSendData"></MyCascader>
                    <el-input placeholder="填写详细地址" v-model="address.full_address"></el-input>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addressConfim">确 定</el-button>
                </span>
         </el-dialog>
    </div>
</template>

<script>
import MyCascader from '@/components/userComponents/MyCascader.vue'
// import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import { updateAddressService, addAddressService } from '@/api/user'
export default {
  data () {
    return {
      dialogVisible: false,
      tittle: '',
      address: {
        id: '',
        districts: '',
        city: '',
        county: '',
        full_address: ''
      }
    }
  },
  methods: {
    setData (obj) {
      this.$nextTick(() => {
        this.$refs.cascader.districtsValue = obj.districts || ''
        this.$refs.cascader.cityValue = obj.city || ''
        this.$refs.cascader.countyValue = obj.county || ''
      })
    },
    open (tittle, obj) {
      this.dialogVisible = true
      this.tittle = tittle
      if (obj.id) {
        // 编辑
        this.address = obj
        this.setData(obj)
      } else {
        // 添加
        this.address = obj
        this.setData(obj)
      }
    },
    async addressConfim () {
      if (!this.address.districts || !this.address.city || !this.address.county) {
        Message.error('请选择完整地址')
        return
      }
      if (this.address.id) {
        // 编辑
        await updateAddressService(this.address).then(res => {
          Message.success(res.message)
        })
      } else {
        // 添加
        await addAddressService(this.address).then(res => {
          Message.success(res.message)
        })
      }
      this.$emit('handlerConfim')
      this.dialogVisible = false
    },
    handlerSendData (data) {
      this.address.districts = data.districts
      this.address.city = data.city
      this.address.county = data.county
    }
  },
  computed: {
    // ...mapGetters('addressStore', ['getAddress'])
  },
  components: { MyCascader }
}
</script>

<style lang="less" scoped>
.dialog-title{
    font-size: 18px;
    font-weight: 700;
}
.dialog_body{
    margin-top: 10px;
    .el-input{
        margin-top: 15px;
    }
}

</style>
